<html>
<head>
    <title>Annotations View</title>
    <link rel="shortcut icon" href="http://informatics-apps.systemsbiology.net/isbfavicon.ico" type="image/x-icon"/>
    <!--[if lt IE 9]>
    <script src="https://informatics-apps.systemsbiology.net/html5shiv/html5shiv.js"></script>
    <![endif]-->

    <link rel="stylesheet" type="text/css" href="https://extjs.cachefly.net/ext-3.4.0/resources/css/ext-all.css">
    <link rel="stylesheet" type="text/css" href="https://extjs.cachefly.net/ext-3.4.0/examples/ux/gridfilters/css/GridFilters.css" />
    <link rel="stylesheet" type="text/css" href="https://extjs.cachefly.net/ext-3.4.0/examples/ux/gridfilters/css/RangeMenu.css" />

    <link rel="stylesheet" type="text/css" href="css/stylesheet.css" />

    <script type="text/javascript" src="https://extjs.cachefly.net/ext-3.4.0/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="https://extjs.cachefly.net/ext-3.4.0/ext-all-debug.js"></script>

    <script type="text/javascript" src="https://extjs.cachefly.net/ext-3.4.0/examples/ux/gridfilters/menu/RangeMenu.js"></script>
    <script type="text/javascript" src="https://extjs.cachefly.net/ext-3.4.0/examples/ux/gridfilters/menu/ListMenu.js"></script>

    <script type="text/javascript" src="https://extjs.cachefly.net/ext-3.4.0/examples/ux/gridfilters/GridFilters.js"></script>
    <script type="text/javascript" src="https://extjs.cachefly.net/ext-3.4.0/examples/ux/gridfilters/filter/Filter.js"></script>
    <script type="text/javascript" src="https://extjs.cachefly.net/ext-3.4.0/examples/ux/gridfilters/filter/StringFilter.js"></script>
    <script type="text/javascript" src="https://extjs.cachefly.net/ext-3.4.0/examples/ux/gridfilters/filter/NumericFilter.js"></script>
    <!--<script type="text/javascript" src="https://extjs.cachefly.net/ext-3.4.0/examples/ux/gridfilters/filter/DateFilter.js"></script>-->
    <!--<script type="text/javascript" src="https://extjs.cachefly.net/ext-3.4.0/examples/ux/gridfilters/filter/ListFilter.js"></script>-->
    <!--<script type="text/javascript" src="https://extjs.cachefly.net/ext-3.4.0/examples/ux/gridfilters/filter/BooleanFilter.js"></script>-->

    <script type="text/javascript" src="https://addama.googlecode.com/hg/gae-svcs/addama-registry/src/main/webapp/js/utils.js"></script>

    <script type="text/javascript" src="js/annotations_grid.js"></script>
    <script type="text/javascript">
        Ext.onReady(function() {
            var uri = get_parameter("uri");
            if (uri) {
                Ext.Ajax.request({
                    url: uri + "/annotations_grid.json",
                    method: "GET",
                    success: function(o) {
                        var annotations_grid = Ext.util.JSON.decode(o.responseText);
                        var topPanel = new Ext.Panel({ html: annotations_grid.description, region: "north", autoHeight: true, frame: true });

                        var grid = new org.cancerregulome.view.AnnotationsGrid(uri, annotations_grid, { height: 400, width: "100%", region: "center", frame: false, margins: "10 5 0 5" });
                        var detail = new org.cancerregulome.view.AnnotationsDetailPanel(uri, { height: 500, width: "100%", region: "south", split: true, frame: false, margins: "5 5 5 5" });
                        grid.on("select-item", function(selectedItem) {
                            detail.show(selectedItem);
                        });
                        grid.on("grid-ready", function() {
                            new Ext.Viewport({ layout: "border", items:[ topPanel, grid.gridPanel, detail.tabPanel ] });
                        });
                    }
                });
            }
        });
    </script>
</head>
<body>
</body>
</html>
